<!--  -->
<template>
  <div id="guestbook">
    <div class="guestbook-center">
      <div>
        <div>
          <el-image style="width: 100px; height: 100px" :src="require('../../assets/blog/guestbook.png')" fit="fill"/>
        </div>
        <div>
          <span>
            反馈 & 建议
          </span>
          <span>
            <el-icon><UserFilled/></el-icon>&nbsp;4k+掘友
            &nbsp;&nbsp;
            <el-icon><Sunny/></el-icon>&nbsp;1w+沸点
            &nbsp;&nbsp;
            <el-icon><Share/></el-icon>&nbsp;分享
          </span>
          <span>
            给misty提需求、反馈 bug。官方运营联系微信：misty
          </span>
        </div>
        <div>
          <el-button type="primary">加入</el-button>
        </div>
      </div>
      <div class="guestbook--centent">
        <el-container>
          <el-main>
            <div>
              <span>
                <el-avatar :size="50" src="https://p3-passport.byteimg.com/img/user-avatar/54e826e7ede327c5a02fb8f6f5cd9f30~100x100.awebp"/>
              </span>
              <span @click="handleDialogClick">
                <el-input v-model="input" placeholder="快和网友一起分享新鲜事！" />
              </span>
            </div>
            <el-tabs
                v-model="activeTabsName"
                type="card"
                class="demo-tabs"
                @tab-click="handleTabsClick"
            >
              <el-tab-pane label="最热" name="hot" >
                <GuestbookContent :activeTabsName="activeTabsName"/>
              </el-tab-pane>
              <el-tab-pane label="最新" name="new">
                <GuestbookContent :activeTabsName="activeTabsName"/>
              </el-tab-pane>
            </el-tabs>
          </el-main>
          <el-aside width="200px">
            <GuestbookAside/>
          </el-aside>
        </el-container>
      </div>
    </div>

    <el-dialog v-model="dialogTableVisible" title="反馈 & 建议">
      <div>
        <el-input v-model="dialogInput" placeholder="反馈 & 建议" />
      </div>
      <div>
        <el-container>
          <el-main>
            <span>表情</span>
            <span>图片</span>
            <span>链接</span>
            <span>话题</span>
          </el-main>
          <el-aside width="200px">
            <el-button type="primary" :disabled="checkDisabled" @click="publishGuestbook">发布</el-button>
          </el-aside>
        </el-container>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {UserFilled, Sunny, Share} from '@element-plus/icons'
import GuestbookContent from '@/components/blog/GuestbookContent.vue'
import GuestbookAside from '@/components/blog/GuestbookAside.vue'
import {publishGuestbook} from '@/api/blog/guestbook'
import {ElMessage } from 'element-plus'

//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from ‘《组件路径》‘;

export default {
  name: "guestbook",
//import引入的组件需要注入到对象中才能使用
  components: {
    UserFilled, Sunny, Share,
    GuestbookContent,GuestbookAside
  },
  data() {
//这里存放数据
    return {
      input:'',
      activeTabsName:'hot',
      dialogTableVisible:false,
      dialogInput:'',
      checkDisabled:true,
      userId:0
    };
  },
  props: {},
//监听属性 类似于data概念
  computed: {},
//监控data中的数据变化
  watch: {
    dialogInput(newVal,oldVal){
      console.log("====================",newVal)
      if(newVal != '' && newVal != null){
        this.checkDisabled = false
      }else {
        this.checkDisabled = true
      }
    }
  },
//方法集合
  methods: {
    handleTabsClick(){},
    load() {
      this.userId = sessionStorage.getItem("userId")?JSON.parse(sessionStorage.getItem("userId")):0
    },
    handleDialogClick() {
      this.dialogTableVisible = true
      // this.checkDisabled=false
    },
    publishGuestbook(){
      publishGuestbook({
        userId:this.userId,
        content:this.dialogInput
      }).then((res)=>{
        if(res.code == 0){
          ElMessage({
            message: "发布留言成功!",
            type: 'success'
          })
          this.dialogTableVisible = false
          this.dialogInput = ''
        }
      })

    },
  },
//生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.load()
  },
//生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, //生命周期 - 创建之前
  beforeMount() {
  }, //生命周期 - 挂载之前
  beforeUpdate() {
  }, //生命周期 - 更新之前
  updated() {
  }, //生命周期 - 更新之后
  beforeDestroy() {
  }, //生命周期 - 销毁之前
  destroyed() {
  }, //生命周期 - 销毁完成
  activated() {
  }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
@import "../../style/blog/guestbook.less";
</style>

